<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/foot.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/sidebar-menu1.css" rel="stylesheet">

    <style>
        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="background-color:transparent;">

    <div class="foot-div analysis">
        <div id="show-panel" class="show-panel" >
            <div id="main" >
                <div class="row" >
                        <div>
                            <span class="slash">|&nbsp;</span>
                            <span class="top-title">水泵分析</span>
                        </div>
                        <div class="">
                            <div class="btn-line">
                                <input id="btn-hour" type="button" class="btn-time " value="时效率" onclick="loadChartLeft('hour');" >
                                <input id="btn-day"  type="button" class="btn-time " value="天效率" onclick="loadChartLeft('day');"  >
                            </div>


                            <div id="left-carvn" class="carvn">
                                <div id="left-graph" class="graph"></div>
                            </div>
                        </div>
                        <div>
                            <span class="slash">|&nbsp;</span>
                            <span class="top-title">管路分析</span>
                        </div>
                        <table>
                            <tr class="table-title">
                                <th>&nbsp;</th>
                                <th>系统</th>
                                <th>限值</th>
                            </tr>
                            <tr>
                                <th>冷冻水输送系数</th>
                                <td>${lengdong!}</td>
                                <td>30</td>
                            </tr>
                            <tr>
                                <th>冷却水输送系数</th>
                                <td>${lengque!}</td>
                                <td>25</td>
                            </tr>
                        </table>
                </div>

                <div style="clear: both;display: block"></div>
            </div>
        </div>

    </div>


    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

    <script src="${ctx!}/assets/js/echarts.min.js"></script>
    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function() {//外部js调用
            setSize();

            chartssize(document.getElementById("left-carvn"),document.getElementById("left-graph"));


            loadChartLeft("hour");
            $(".left-panel #btn-hour").addClass("current");
        });

        function setSize(){
            var barheight = $("#navbar", window.parent.document).height();//获取当前页面总高度
            var top=barheight+$(".top-div").height()+20;//顶部页面的高度（注意height计算的高度没有把顶部嵌套的页面高度加进去）
            $(".foot-div").css("top",top);//给底部页面添加绝对路径距离上面高度
            $(".foot-div").height(document.documentElement.clientHeight-top);
        }

        $('.left-panel .btn-time').click(function(e){
            $(".left-panel .btn-time").removeClass("current")
            e.target.classList.add("current");
        });
        
        function loadChartLeft(mode) {
            function queryParams() {
                return {
                    mode: mode,
                };
            }
            upload = layer.msg('加载中。。。', {
                icon: 16
                , shade: 0.2,
                time: false
            });
            $.ajax({
                type: "POST",
                url: "${ctx!}/web/analysis/pipenet/data",
                dataType: "json",
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify(queryParams()),
                success: function(rtn){
                    layer.close(upload);
                    generateChart(rtn.data, 'left-graph');
                }
            });
        }

        function generateChart(data, graph) {
            //基于准备好的DOM，初始化echarts实例
            var myChart = echarts.init(document.getElementById(graph), 'light');
            //指定图表的配置项和数据
            myChart.clear();

            function getSeries(){
                let series = [];
                for(var i = 0; i < data.yLists.length; i++) {
                    var e = {
                        name: data.legends[i],
                        type: 'line',
                        data: data.yLists[i],
                    };
                    series.push(e);
                }
                console.log(JSON.stringify(series));
                return series;
            }

            window.addEventListener('resize', function () {
                myChart.resize()
            });


            // 指定图表的配置项和数据
            var option = {
                textStyle: {
                    color: '#fff',
                },
                title: {
                    textStyle: {
                        color: '#fff',
                    },
                    text: data.title,
                    subtext: data.tag,
                },
                tooltip: {},
                legend: {
                    textStyle: {
                        color: '#fff',
                    },
                    data: data.legends,
                },
                xAxis: {
                    data: data.xList,
                },
                yAxis: {
                    scale:true,
                    itemStyle: {
                        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                        emphasis: {
                            barBorderRadius: 30
                        },

                        normal: {
                            //柱形图圆角，初始化效果
                            barBorderRadius:[10, 10, 10, 10],
                            label: {
                                show: true,//是否展示
                                position: 'top',
                                textStyle: {
                                    fontWeight:'bolder',
                                    fontSize : '12',
                                    fontFamily : '微软雅黑',
                                }
                            }
                        }
                    },
                },
                series: getSeries(),
            };
            //使用刚指定的配置项和数据显示图表
            myChart.setOption(option);
        }


        // 使用刚指定的配置项和数据显示图表。
        function chartssize(container, charts){
            function getStyle(el, name)
            {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(el, null);
                } else {
                    return el.currentStyle;
                }
            }
            let wi = getStyle(container, 'width').width-22;
            let hi = getStyle(container, 'height').height-30;
            charts.style.height = hi;
            charts.style.width = wi;
        }


        window.onresize=function(){
            chartssize(document.getElementById("left-carvn"),document.getElementById("left-graph"));
        };

    </script>

    
    

</body>

</html>
